<template>
  <div class="task-list">
    <el-table :data="tableData" style="width: 1226px">
      <el-table-column prop="title" label="任务名"></el-table-column>
      <el-table-column prop="datetime" label="任务发布时间"></el-table-column>
      <el-table-column prop="reqId" label="reqId"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="onLookMessage(row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="完成状态">
        <el-button type="primary" size="small" @click="complete(reqId)">确认</el-button>
      </el-table-column>
    </el-table>
    <div v-show="showAnswer">
      <h3>选定行详细信息：</h3>
      <!-- 修改 el-descriptions 组件的属性 -->
      <el-descriptions :data="answer" border :column="1">
        <el-descriptions-item label="账号">{{ answer.account }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{ answer.title }}</el-descriptions-item>
        <el-descriptions-item label="信息">{{ answer.message }}</el-descriptions-item>
        <el-descriptions-item label="日期时间">{{ answer.datetime }}</el-descriptions-item>
        <el-descriptions-item label="附件路径">{{ answer.annexPath }}</el-descriptions-item>
        <el-descriptions-item label="请求ID">{{ answer.reqId }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ answer.state ? '已完成' : '未完成' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { reactive, ref } from 'vue'
import { onMounted } from 'vue'
import func_map from '../main'

export default {
  setup() {
    //console.log(sessionStorage.getItem('account'))
    const data = reactive({
      account: sessionStorage.getItem('account')
    })
    const tableData = reactive([])
    const answer = reactive([])
    const showAnswer = ref(false)
    const complete = async (reqId) => {
      const { data: state } = await axios.post('user/function/achieveTask', {
        reqId: reqId
      })
      console.log(state.data)
    }
    const getTaskRes = async () => {
      // 向user/function/checkSendTask端点发送POST请求，带有帐户数据
      const { data: res } = await axios.post('user/function/checkSendTask', {
        account: data.account
      })
      if (res.code == 200) {
        // 检查响应代码是否为200
        // 使用响应数据更新tableData，为每个任务对象添加showAnswer属性
        tableData.splice(
          0,
          tableData.length,
          ...res.data.map((task) => ({
            ...task
            // showAnswer: false
          }))
        )
        for (const task of tableData) {
          // 遍历tableData中的每个任务
          const reqId = task.reqId // 获取任务的reqId
          await getAnswer(reqId) // 调用getAnswer函数，参数为reqId
        }
      }
    }

    // 定义一个异步函数，用于获取给定reqId的响应数据
    const getAnswer = async (reqId) => {
      // 向user/function/checkAnswer端点发送POST请求，带有reqId作为数据
      const { data: res } = await axios.post('user/function/checkAnswer', {
        reqId
      })
<<<<<<< HEAD
      // this.answer=res.data
      console.log(res.data)
      // return res.data
      // this.answer=res.data
      // console.log(this.answer)
      if (res.data != null || undefined) {
        answer.splice(
          0,
          answer.length,
          ...res.data.map((answer) => ({
            ...answer
          }))
        )
      //
      //
      } else {
        // console.log("暂无回复")
      }
      // this.answer=res.data


    }
    const handleClick = (row) => {
      row.showAnswer = !row.showAnswer
=======
      if (res.data !== null || res.data !== undefined) {
        // 检查响应数据是否不为null或undefined
        // 使用响应数据更新响应数组
        answer.splice(
          0,
          answer.length,
          ...res.data.map((answerId) => ({
            ...answerId
          }))
        )
      }
    }

    // 定义一个函数来处理在表格行中单击“查看”按钮
    const onLookMessage = async (row) => {
      showAnswer.value = true // 将showAnswer值设置为true以显示响应数据
      await getAnswer(row.reqId) // 调用getAnswer函数，参数为row.reqId
>>>>>>> 2726c75ecf1a019fc19f4f20b8c7bb639d2119fc
    }

    onMounted(getTaskRes)
    onMounted(getAnswer)
    // onMounted(function(){
    //   func_map.func_map['UpdateTaskEvent'] = getTaskRes
    //   console.log(func_map)
    // })
    return {
      getTaskRes,
      tableData,
      onLookMessage,
      getAnswer,
      answer,
      showAnswer,
      complete
    }
  }
}
</script>

<style>
.task-list {
  position: relative;
  margin: 0 auto;
  width: 1226px;
  height: 100%;
}
</style>
